<template>
  <div id="translateFrom" class="row">
    <div class="col-md-6 col-md-offset-3">
    <form id="transForm" v-on:submit="formSubmit" class="well form-inline">
      <input class="from-control inp" type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
      <select v-model="language" class="from-control select">
        <option value="en">English</option>
        <option value="ru">Russian</option>
        <option value="ko">Korean</option>
        <option value="ja">Janpense</option>
      </select>
      <input type="submit" value="翻译" class="btn btn-primary">
    </form>
  </div>
  </div>
</template>

<script>
  export default {
    name: 'translateFrom',
    data: function () {
      return {
        textToTranslate: '',
        language: ''
      }
    },
    methods: {
      formSubmit: function (e) {
//          alert(this.textToTranslate);
        e.preventDefault();
        this.$emit("formSubmit", this.textToTranslate,this.language);

      }
    },
    created:function () {
      this.language="en"
    }

  }
</script>

<style>
  #transForm{
    border-radius: 10px;
    border: 1px solid #ccc;
  }
  .select{
    width: 80px;

  }


</style>
